import Tabs from 'antd/es/tabs';
import { useMemo } from 'react';
import { Collapse, TriggerPosition } from '../../components';
import { FunctionDemo } from './api-demo';
import './index.less';
import { ModelInfo } from './model-info';


export function RightPanel() {

    const items = [
        { label: '模型数据', key: 'modelData', children: <ModelInfo /> },
        { label: 'API调用示例', key: 'apiCall', children: <FunctionDemo /> },
    ];

    const defaultExpand = useMemo(() => {
        if (window.innerWidth > 500) {
            return true;
        } else {
            return false;
        }
    }, [])

    return <Collapse defaultExpand={defaultExpand} className='right-panel-main' triggerPosition={TriggerPosition.Left}><Tabs items={items} className='right-panel-tab' /></Collapse >
}